<template>
  <div class="analysis-container">
    <!-- 路由出口 -->
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" :filter-params="filterForm" />
      </keep-alive>
    </router-view>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'

// 筛选表单数据
const filterForm = reactive({
  dateRange: [],
  category: '',
  city: '',
  shopId: '',
  gender: '',
  ageRange: ''
})

// 选项数据
const categories = ref(['服装', '电子', '食品', '家居'])
const cities = ref(['北京', '上海', '广州', '深圳'])
const shops = ref(['001', '002', '003', '004'])
const ageRanges = ref(['18-24', '25-34', '35-44', '45-54', '55+'])

// 处理筛选
const handleFilter = () => {
  // 触发筛选事件，更新数据
}

// 重置筛选
const resetFilter = () => {
  filterForm.dateRange = []
  filterForm.category = ''
  filterForm.city = ''
  filterForm.shopId = ''
  filterForm.gender = ''
  filterForm.ageRange = ''
}
</script>

<style scoped>
.analysis-container {
  height: 100%;
  overflow-y: auto;
}

.filter-section {
  margin-bottom: 20px;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 16px;
  margin-bottom: 16px;
}

:deep(.el-select) {
  width: 160px;
}

:deep(.el-date-editor) {
  width: 240px;
}

:deep(.el-button) {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>